<template>
  <div id="addAwardDialog">
    <el-dialog
      title="编辑"
      :visible.sync="dialogData.isShow"
      width="550px"
      :before-close="HandleClose"
    >
      <div class="cus-form-block">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="积分">
            <el-input v-model="form.Integral" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="发放奖品">
            <el-button
              v-if="addAwardDialog.multipleSelection.length == 0"
              type="warning"
              plain
              @click="handleAddAward"
            >
              添加奖品
            </el-button>
            <el-tag v-if="addAwardDialog.multipleSelection.length > 0" closable>
              已选择{{ addAwardDialog.multipleSelection.length }}项奖品
            </el-tag>
            <el-button
              v-if="addAwardDialog.multipleSelection.length > 0"
              type="warning"
              plain
              @click="handleAddAward"
            >
              编辑
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div class="cus-blcok--switch">
        <el-row v-for="(item, index) in permission" :key="index">
          <el-col :span="12">
            {{ item.title }}
          </el-col>
          <el-col :span="8" :push="5">
            <el-switch
              v-model="item.isOpen"
              active-value="0"
              inactive-value="1"
              active-color="#13ce66"
              @change="handleChangeStatus(item.isOpen, item)"
            ></el-switch>
          </el-col>
          <el-col :span="4">
            {{ item.content }}
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click.prevent="handleCancel"
          >取消</el-button
        >
        <el-button type="success" @click.prevent="HandleCloseView"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <awardListDialog
      v-if="addAwardDialog.isShow"
      :awarddialog="addAwardDialog"
      @update="receive"
    ></awardListDialog>
  </div>
</template>

<script>
import awardListDialog from '@component/behaviorManagement/attributeManage/awardListDialog' // 添加奖品

export default {
  name: 'AddAwardDialog',
  msg: '属性管理--添加奖品',
  components: {
    awardListDialog
  },
  props: ['dialogData'],
  data: function() {
    return {
      loading: true,
      form: {
        Integral: ''
      },
      permission: [
        { title: '发图文作业权限', isOpen: '0', content: '已开通' },
        { title: '发小视频作业权限', isOpen: '1', content: '未开通' },
        { title: '参加活动权限', isOpen: '1', content: '未开通' },
        { title: '提交活动作业权限', isOpen: '0', content: '已开通' },
        { title: '作业评论权限', isOpen: '0', content: '已开通' },
        { title: '作品评论权限', isOpen: '0', content: '已开通' },
        { title: '回复评论权限', isOpen: '0', content: '已开通' },
        { title: '点赞权限', isOpen: '0', content: '已开通' },
        { title: '分享权限', isOpen: '0', content: '已开通' },
        { title: '收藏权限', isOpen: '0', content: '已开通' }
      ],
      addAwardDialog: {
        isShow: false,
        multipleSelection: []
      }
    }
  },
  mounted() {},
  methods: {
    // 关闭前
    HandleClose(done) {
      this.$confirm('确认要修改积分吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '已保存'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      this.handleCancel()
      done()
    },
    // 关闭
    HandleCloseView() {
      this.handleCancel()
    },
    // 取消
    handleCancel() {
      this.loading = false
      this.dialogData.isShow = false
    },
    // 添加奖品
    handleAddAward() {
      this.addAwardDialog.isShow = true
    },
    // 接收子组件传递过来的数据
    receive(data) {
      this.addAwardDialog.multipleSelection = data
    },
    // 改变状态
    handleChangeStatus(status, obj) {
      // 只有关闭才会弹框
      if (status === '1') {
        this.$confirm('确认要关闭' + obj.title + '吗?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '已关闭'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      }
    }
  }
}
</script>
<style lang="less">
#addAwardDialog {
  @green: #1dc8a4;
  @green-light: rgba(29, 200, 164, 0.8);
  .el-dialog {
    //reset diogla style
    border-radius: 4px;
    .el-dialog__header {
      border-bottom: 1px solid rgba(225, 228, 233, 1);
    }
    .el-dialog__footer {
      margin-top: 50px;
      padding: 10px;
      /* border-top: 1px solid #eeeeee;*/
    }
    .cus-blcok--switch {
      background-color: #fff;
    }
    .el-row {
      margin-bottom: 20px;
    }
    //自定义
    .dialog-footer {
      .el-button {
        padding: 5px 30px;
        border-radius: 2px;
        font-family: 'Microsoft YaHei';
        font-size: 14px;

        &.el-button--primary {
          background-color: @green;
          border-color: @green;

          &:hover {
            background-color: @green-light;
          }
        }

        &.el-button--default {
          &:hover {
            border-color: @green;
            background-color: @green-light;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
